<!-- 样式 -->
<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/plan.css">
</script>
<style>
    .nextTable {
        width: 100%;
    }

    .box .layui-input-block {
        width: 100%;
    }

    table thead tr th,
    table tbody tr .t {
        /* height: 30px; */
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        /*规定段落的文本不进行换行*/
        overflow: hidden;
        /*超出隐藏*/
        text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  IE*/
        -moz-text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  火狐*/
    }

    table {
        table-layout: fixed;
        /*table的内部布局固定大小，才可以通过td的width控制宽度*/
        word-wrap: break-word;
        /*允许长单词换到下一行*/
    }

    .submit2 {
        background: red;
    }
</style>
<div class="layui-containner">
    <div class="layui-fluid">
        <div class="layui-title">保养工单提交</div>
        <ul class="box layui-row">
            <li class="layui-col-md4 layui-col-sm4">
                <div class="layui-form-item">
                    <label class="layui-form-label">保养工单编号: </label>
                    <div class="layui-input-block">
                        <!-- <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input"> -->
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">保养工单名称:</label>
                    <div class="layui-input-block">
                        <!-- <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input"> -->
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">保养工单状态：</label>
                    <div class="layui-input-block">
                        <!-- <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input"> -->
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">保养计划名称：</label>
                    <div class="layui-input-block">
                        <!-- <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input"> -->
                    </div>
                </div>
            </li>
            <li class="layui-col-md4 layui-col-sm4">
                <div class="layui-form-item">
                    <label class="layui-form-label">保养负责人：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">保养开始时间：</label>
                    <div class="layui-input-block">
                        <!-- <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input"> -->
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 保养截止时间：</label>
                    <div class="layui-input-block">
                        <!-- <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input"> -->
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 保养耗时：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
            </li>
            <li class="layui-col-md4 layui-col-sm4 xun">
                <div>位置范围：<span></span></div>
                <div>保养说明：<span></span></div>
            </li>
        </ul>
    </div>
    <div class="layui-fluid">
        <div class="layui-title">
            <span class="layui-title-inner">设备基本信息</span>
        </div>
        <table class="layui-table" lay-size="sm">
            <thead>
                <tr>
                    <th>设备编号</th>
                    <th>设备名称</th>
                    <th>设备类型</th>
                    <th>供应商</th>
                    <th>设备系列</th>
                    <th>设备型号</th>
                    <th style="width: 50%;">巡检项目</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <footer class="footer layui-btn-containner">
            <button class="footer-btn layui-btn layui-btn-radius layui-btn-primary submit2 layui-bg-red">提交</button>
            <button class="footer-btn layui-btn layui-btn-radius layui-btn-primary submit layui-bg-blue">保存</button>
            <button class="footer-btn layui-btn layui-btn-radius layui-btn-primary cancel">取消</button>
        </footer>
    </div>
</div>

<script>
    layui.use(['table', 'admin', 'laypage', 'laytpl', 'tree', 'form', 'api', 'view', 'laydate', 'utill'], function () {
    var $ = layui.$,
        admin = layui.admin,
        view = layui.view,
        api = layui.api,
        table = layui.table,
        setter = layui.setter,
        laytpl = layui.laytpl,
        utill = layui.utill,
        tree = layui.tree,
        laydate = layui.laydate,
        form = layui.form;

        form.render();
        // 巡检计划详情信息 
        $('[data-jump="maintain/cash"]').addClass('layui-this').attr('color', '#FFF');
        let planId = layui.router().hash.split('=')[1]
        admin.req({
                type: 'post',
                url: layui.api.host + '/order/MaintainDetails.json',
                dataType: 'json',
                contentType: "application/json",
                data:JSON.stringify({id:planId}),
                success: function (res) {
                    let planDetails = res.data.equip // 表格数据
            let planid = res.data.fil // 头部信息 
            let table = `<tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                        <table class="nextTable">
                                            <thead>
                                                <tr>
                                                    <td>项目名称</td>
                                                    <td>保养部位</td>
                                                    <td>保养说明</td>
                                                    <td>是否完成</td>
                                                    <td>保养结果</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </td>
                                </tr>`;
            if (planid.fil05 == 1) {
                planid.fil05 = '未开始';
            } else if (planid.fil05 == 2) {
                planid.fil05 = '待执行';
            } else if (planid.fil05 == 7) {
                planid.fil05 = '超时';
            }
            else if (planid.fil05 == 8) {
                planid.fil05 = '超时完成';
            }
            else if (planid.fil05 == 9) {
                planid.fil05 = '已完成';
            }
            $('.layui-input-block').eq(0).html(planid.fil01)
            $('.layui-input-block').eq(1).html(planid.tcReqName)
            $('.layui-input-block').eq(2).html(planid.fil05)
            $('.layui-input-block').eq(3).html(planid.tcReqName)

            $('.layui-input-block').eq(4).html(planid.xjgen02)
            $('.layui-input-block').eq(5).html(planid.fil12)
            $('.layui-input-block').eq(6).html(planid.fil13)
            $('.layui-input-block').eq(7).html(planid.tcReqDuration)

            $('.xun div span').eq(0).html(planid.fil07)
            $('.xun div span').eq(1).html(planid.fil21)

            planDetails.forEach(item => {
                let nextTable = ''
                if (item.xjproject == null) {
                    item.xjproject = item.byproject
                }
                item.xjproject.forEach(elem => {
                    nextTable += `<table class="nextTable">
                                    <tbody>
                                        <tr>
                                            <td class="t">${elem.tcMaintName}</td>
                                            <td class="t">${elem.tcMaintPart}</td>
                                            <td class="t">${elem.tcMaintDsc}</td>
                                            <td class="layui-form t">`
                    if (elem.tcProjStatus == 0) {
                        nextTable += `<select name="city" lay-verify="" style="display:block">
                                                                 <option value="0">否</option>
                                                                  <option value="1">是</option>
                                                             </select>`
                    } else {
                        nextTable += `<select name="city" lay-verify="" style="display:block">
                                                                    <option value="1">是</option>
                                                                    <option value="0">否</option>
                                                              </select>`
                    }
                    nextTable += `</td>
                                                
                                                                <td class="t">
                                                                    <input data-id='${elem.tcProjId}' type="text" name="title" value="${elem.tcProjDsc == null ? "" : elem.tcProjDsc}"  placeholder="请填写"  class="layui-input">
                                                                </td>

                                                            </tr>
                                                        </tbody>
                                                    </table>`
                })
                table += `<tr>
                                    <td class="t">${item.fia01}</td>
                                    <td class="t">${item.fia02}</td>
                                    <td class="t">${item.fic02}</td>
                                    <td class="t">${item.pmc03}</td>
                                    <td class="t">${item.tcSeriesCode}</td>
                                    <td class="t">${item.fii02}</td>
                                    <td class="t">
                                        ${nextTable}
                                    </td>
                                </tr>`

            })
            $('.layui-table tbody').html(table)
                }
            });

        // 保存
        $('.submit').on('click', function () {
            let project = []
            let number = $('select').length
            if (!+number) return
            for (let i = 0; i < number; i++) {
                project.push({
                    tcProjDsc: $('select').eq(i).parent().next().find('input').val(), // 说明
                    tcProjId: $('select').eq(i).parent().next().find('input').attr('data-id'), // id
                    tcProjStatus: $('select').eq(i).val() // 是否成功 
                })
            }
            admin.req({
                    type: 'post',
                    url: layui.api.host + '/order/insertXJandBY1.json',
                    dataType: 'json',
                    contentType: "application/json",
                    data:JSON.stringify({     //修改
                        project,
                        tcReqId: planId
                    }),
                    success: function (res) {
                        if (res.code == 0) {
                            layer.open({
                                content:res.message
                            });
                            setTimeout(function(){
                                location.hash = '/maintain/cash';
                            },1000)
                        } else {
                            layer.open({
                                content:res.message
                            });
                        }
                    }
            })
        })

        // 提交按钮
        $('.submit2').on('click', function () {
            let project = []
            let number = $('select').length
            if (!+number) return
            for (let i = 0; i < number; i++) {
                project.push({
                    tcProjDsc: $('select').eq(i).parent().next().find('input').val(), // 说明
                    tcProjId: $('select').eq(i).parent().next().find('input').attr('data-id'), // id
                    tcProjStatus: $('select').eq(i).val() // 是否成功 
                })
                if ($('select').eq(i).parent().next().find('input').val() == '') {
                    layer.msg("请将保养结果填写完整");
                    return;
                }
                if ($('select').eq(i).val() == '0') {
                    layer.msg("项目未全部完成");
                    return;
                }
            }
            admin.req({
                    type: 'post',
                    url: layui.api.host + '/order/submitXJandBY1.json',
                    dataType: 'json',
                    contentType: "application/json",
                    data:JSON.stringify({     //修改
                        project,
                        tcReqId: planId
                    }),
                    success: function (res) {
                        if (res.code == 0) {
                            layer.open({
                                content:res.message
                            });
                            setTimeout(function(){
                                location.hash = '/maintain/cash';
                            },1000)
                        } else {
                            layer.open({
                                content:res.message
                            });
                        }
                    }
                })
        })

        $('.cancel').on('click', function () {
            setTimeout(function(){
                location.hash = '/maintain/cash';
            },1000)
        })
        $('[data-jump="patrol/cash"]').addClass('layui-this');
    })
</script>